<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    input {
      background: transparent;
      border: none;
      color: white;
      position: absolute;
      top: 100px;
      left: 0;
      outline: none;
      
    }

    div {
      position: relative;
    }
  </style>
  <script>
    var xhr = new XMLHttpRequest();
    xhr.open('GET', './colors.xml');
    xhr.onload = function () {
      var str = '';
      var arr = xhr.responseXML.childNodes[0].children;
      for (var i = 0, len = arr.length; i < len; i++) {
        var temp;
        if (temp = parseAHEX(arr[i].innerHTML)) {
          str += `<div style = 'width:150px;
                            height:150px;
                            float:left;
                            color:white;
                            background-color:rgba(${temp[0]},${temp[1]},${temp[2]},${temp[3]});'data=rgba(${temp[0]},${temp[1]},${temp[2]},${temp[3]});>
                            <p style='word-break:break-all;padding:10px;font-size:18px;font-weight:bold;'>
                              ${arr[i].getAttribute('name')}
                            </p>
                            <input value='rgba(${temp[0]},${temp[1]},${temp[2]},${temp[3]})'></input>
                            </div>`
        }
      }
      document.body.innerHTML += str;
    }
    xhr.send();
    function parseAHEX(str) {
      console.log(str);
      if (str.charAt(0) !== '#')
        return false;
      var resolve = new Array(4);
      var arr = str.split('');
      arr.shift();
      arr.push(arr[0], arr[1]);
      arr.shift();
      arr.shift();
      for (var i = 0; i < arr.length / 2; i++) {
        if (i === 3) {
          // console.log(arr, arr[i*2], arr[i + 1]);
          resolve[i] = parseInt(arr[i * 2], 16) / 15 / 2 + parseInt(arr[i * 2 + 1], 16) / 15 / 2;
        } else {
          resolve[i] = parseInt(arr[i * 2] + arr[i * 2 + 1], 16);
          console.log(parseInt(arr[i * 2] + arr[i * 2 + 1], 16));
        }
        // console.log(resolve[i - 1]);
      }
      console.log(resolve);
      return resolve;
    }
    document.addEventListener('click', e => {
      e.target.select();
      document.execCommand('copy');
    })
  </script>
</head>

<body style="background-color: #666;">

</body>

</html>